import React from 'react';
class Child extends React.Component{
    state={
        msg:'水电费few地方v俄方'
    }
    componentWillReceiveProps(nextProps){//这个钩子函数的触发需要父组件向其传递props
        //组件接收到了新的props的时候会触发
        //nextProps接收到的是最新的props
        console.group('子组件的componentWillReceiveProps')
        console.log('old===',this.props);
        console.log('new===',nextProps);
        console.groupEnd()
    }
    componentWillUpdate(nextProps,nextState){
        //不可以修改state

        console.group('子组件的componentWillUpdate')
        console.log('props',nextProps);
        console.log('state',nextState);
        console.groupEnd()
        // console.log('子组件的componentWillUpdate');
    }
    shouldComponentUpdate(nextProps, nextState){
        //性能优化的钩子，非常主观的钩子，需要我们自行主观判断,编写逻辑来优化我们的性能
        //因为设置了相同的props , state,也会导致render和后续的update钩子的触发,造成大量的性能浪费
        //需要return true或者false, return true表示需要更新，return false 不需要更心
        //判断新老state的变化是否致，如果一直,不需要更新,如果不一致,就需要更新
        let oldMsg = this.state.msg
        let newMsg = nextState
        if(oldMsg===newMsg){
            return false
        }
            return true

    }
    componentDidUpdate(preProps,preState,snapshot){
        //可以修改dom
        //不可以修改state
        console.group('子组件的componentDidUpdate')
        console.log('preProps',preProps);
        console.log('preState',preState);
        console.groupEnd()
        // console.log('子组件的componentDidUpdate');
    }
    render(){
        return(
            <fieldset>
                <legend>子组件</legend>
                <h4>{this.state.msg}</h4>
            </fieldset>
        )
    }
}

class LifeCricle extends React.Component{
    state={
        msg:'出手大方马路对面v哦额'
    }
    // componentWillMount(){
        //组件初始化时只调用，以后组件更新不调用，整个生命周期只调用-次，此时可以修改state。异步请求不要在此钩子中发起,容易造成无限更新
//为什么会造成无限更新?因为react16.4版本以后对底层重新编写了,这个生命周期钩子函数是不安全的
//1.可以修改state
//2.不要发异步请求
//3.不能操作dom
        // console.log('父组件的componentWillMount');
        // let abc = document.getElementById('randomMsg').innerText
        // console.log(abc);//操作dom是会报错的
    // }
    // componentWillReceiveProps(nextProps){
    //     // 组件更新后会触发的钩子函数
    // }
    componentDidMount(){
//虚拟dom渲染完毕了,已经替换了页面上的真实dom
//1. 可以修改state 是万金油钩子,用的多
//2.可以发异步请求
//3.可以操作dom
        console.log('父组件的componentDidMount');
        let abc = document.getElementById('randomMsg').innerText
        console.log(abc);//操作dom是可以的
    }
    handleClick=()=>{
        this.setState({
            msg:'而疯狂的热v反对v奋斗的发表v非得把我'
        })
    }
    // 新的钩子函数
    static getDerivedStateFromProps(nextProps, nextState){
        // 此钩子函数需要return值,return的值会更新state
        // 因为是静态的钩子函数,所以里面不可以使用this
        // 因为是静态的钩子函数,所以这个钩子函数是会优先执行的
        console.log(123656);
        return {
            msg:'111111111111111111111111111111111111'
        }

    }
     // 新的钩子函数
    getSnapshotBeforeUpdate(prevProps, prevState){
        return '222222222222222222222222'
    }
    componentDidUpdate(preProps,preState,snapshot){
        console.log(snapshot);
    }
    render(){
        console.log('父组件的render');
        return(
            <fieldset>
                <legend>生命周期</legend>
                <h3 id='randomMsg'>{this.state.msg}</h3>
                <button onClick={this.handleClick}>点击传递参数</button>
                <Child dataa={this.state.msg}/>
            </fieldset>
        )
    }
}
export default LifeCricle